<template>
<!-- 照抄讲义中结构 -->
  <div>
    <!-- <a href="#" class="btn btn-primary">添加英雄</a> -->
    <router-link to="/hero/add"  class="btn btn-primary">添加英雄</router-link>
    <hr />
    <table class="table table-hover">
      <thead>
        <tr>
          <th>ID</th>
          <th>英雄名称</th>
          <th>英雄性别</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,idx) in list" :key="idx">
          <td>{{item.id}}</td>
          <td>{{item.heroName}}</td>
          <td>{{item.gender}}</td>
          <!-- 对日期时间使用过滤器来做格式化 -->
          <td>{{item.cTime | dateFormat}}</td>
          <td>
            <!-- 跳转到编辑页面，并传入当前要编辑的英雄的编号 
              跳转页面带参数：  XXXXXX
            -->
            <button @click="hEdit(item.id)" class="btn btn-success">编辑</button>
            &nbsp;
            <button @click="hDel(item.id)" class="btn btn-danger" >删除</button>
          </td>
        </tr>
        
      </tbody>
    </table>
    <button @click="hTestAxios">测试axios</button>
  </div>
</template>

<script>

    export default {
        name: 'Hero',
        data () {
          // 对于组件中的数据项，一定要用 : data () { return {} }
          // 只有是new Vue()时，才能直接写对象 new Vue({data: {}})
          return {
            list: [
              // {id:1,heroName:'xxx',gender:'女', cTime: 'XXXXXX'}
              ]
          }
        },
        // 当页面打开时，去获取数据
        created () {

          console.log( this.abcccc)
          // 这是一个钩子函数，它会在当前组件创建完成之后，自动调用。
          // alert(1)
          // 调用方法获取数据，保存在list中，则视图会自动更新
          this.getData()
        },
        methods: {
          // 跳转到编辑页，并传入当前的id
          hEdit(id) {
            this.$router.push('/hero/edit/'+id)
          },
          // 获取数据，保存在list
          getData () {
            this.$http({
                   method: 'get' ,
                   url: '/heroes'
                }).then(res => {
                    console.log(res)
                    this.list = res.data
                }).catch (err => {
                    console.log(err)
                })
          },
          // 发请求，删除指定id的数据 
          hDel (id) {
            if(!confirm('你确定要删除吗？')){
              // 如果不删除
              return
            }

            this.$http({
              method: 'delete',
              url: '/heroes/' + id
            }).then(res => {
              console.log(res)
              // 再次加载数据
              this.getData()
            }).catch(err => {
              console.log(err)
            })
          },
          hTestAxios () {
              // 2. 根据axios的使用格式，发出一个请求试一下
              this.$http({
                  method: 'get' ,
                  url: '/heroes'
              }).then(res => {
                  console.log(res)
                  this.list = res.data
              }).catch (err => {
                  console.log(err)
              })
          }
        }
    }
</script>
